<template>
  <view class="user-set">
    <navigator :url="`/pages/user_data/user_data`">
      <view class="item flex bg-white mt-[20rpx]">
        <u-avatar :src="userInfo.avatar" shape="square" :size="100"></u-avatar>
        <view class="ml-[20rpx] flex flex-1 justify-between items-center">
          <view>
            <view class="mb-[15rpx] text-xl font-medium">{{ userInfo.nickname }}</view>
            <view class="text-content text-xs">账号：{{ userInfo.account }}</view>
          </view>
          <u-icon name="arrow-right" color="#666"></u-icon>
        </view>
      </view>
    </navigator>
    <view class="item bg-white mt-[20rpx] btn-border flex flex-1 justify-between" @click="handlePwd">
      <view class="">登录密码</view>
      <u-icon name="arrow-right" color="#666"></u-icon>
    </view>
    <!--  #ifdef H5 || MP-WEIXIN -->
    <view v-if="isWeixin" class="item bg-white flex flex-1 justify-between" @click="bindWechatLock">
      <view class="">绑定微信</view>
      <view class="flex justify-between">
        <view class="text-muted mr-[20rpx]">{{ userInfo.is_auth ? '已绑定' : '未绑定' }}</view>
        <u-icon v-if="userInfo.is_auth == 0" name="arrow-right" color="#666"></u-icon>
      </view>
    </view>
    <!-- #endif -->
    <navigator :url="`/pages/agreement/agreement?type=${AgreementEnum.PRIVACY}`">
      <view class="item bg-white mt-[20rpx] btn-border flex flex-1 justify-between">
        <view class="">隐私政策</view>
        <u-icon name="arrow-right" color="#666"></u-icon>
      </view>
    </navigator>
    <navigator :url="`/pages/agreement/agreement?type=${AgreementEnum.SERVICE}`">
      <view class="item bg-white btn-border flex flex-1 justify-between">
        <view class="">服务协议</view>
        <u-icon name="arrow-right" color="#666"></u-icon>
      </view>
    </navigator>
    <navigator url="/pages/as_us/as_us">
      <view class="item bg-white flex flex-1 justify-between">
        <view class="">关于我们</view>
        <view class="flex justify-between">
          <view class="text-muted mr-[20rpx]">{{ config.version }}</view>
          <u-icon name="arrow-right" color="#666"></u-icon>
        </view>
      </view>
    </navigator>

    <view class="mt-[60rpx] mx-[26rpx]"><u-button type="primary" shape="circle" @click="logoutHandle">退出登录</u-button></view>

    <u-action-sheet :list="list" v-model="show" @click="handleClick" :safe-area-inset-bottom="true"></u-action-sheet>
  </view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import { AgreementEnum } from '@/utils/type';
import { isWeixinClient } from '@/utils/client';
// #ifdef H5
import wechatOa from '@/utils/wechat';
// #endif

export default {
  data() {
    return {
      list: [
        {
          text: '修改密码'
        },
        {
          text: '忘记密码'
        }
      ],
      isWeixin: true,
      show: false
    };
  },
  computed: {
    ...mapState(['config', 'userInfo'])
  },
  async onLoad(options) {
    // #ifdef H5
    this.isWeixin = isWeixinClient();

    const { code } = options;
    if (!this.isWeixin) return;
    if (code) {
      uni.showLoading({
        title: '请稍后...'
      });
      try {
        await uni.$u.api.oaAuthBind({ code });
        await this.getUser();
      } catch (error) {}
      //用于清空code
      uni.redirectTo({
        url: '/pages/user_set/user_set'
      });
    }

    // #endif
  },
  methods: {
    ...mapActions(['getUser', 'login', 'logout']),
    // 修改/忘记密码
    handleClick(index) {
      switch (index) {
        case 0:
          uni.navigateTo({ url: '/pages/change_password/change_password' });
          break;
        case 1:
          uni.navigateTo({ url: '/pages/forget_pwd/forget_pwd' });
          break;
      }
    },
    handlePwd() {
      if (!this.userInfo.has_password) return uni.navigateTo({ url: '/pages/change_password/change_password?type=set' });
      this.show = true;
    },
    // 退出登录
    logoutHandle() {
      uni.showModal({
        content: '是否退出登录？',
        confirmColor: '#4173FF',
        success: ({ cancel }) => {
          if (cancel) return;
          this.logout();
          uni.redirectTo({ url: '/pages/login/login' });
        }
      });
    },
    async bindWechat() {
      if (this.userInfo.is_auth) return;
      try {
        uni.showLoading({
          title: '请稍后...'
        });
        // #ifdef MP-WEIXIN
        const { code } = await uni.login({
          provider: 'weixin'
        });
        await mnpAuthBind({
          code: code
        });
        //#endif
        // #ifdef H5
        if (this.isWeixin) {
          wechatOa.getUrl();
        }
        // #endif
        await this.getUser();
        uni.hideLoading();
      } catch (e) {
        uni.hideLoading();
        uni.$u.toast(e);
      }
    }
  },
  onShow() {
    this.getUser();
  }
};
</script>

<style lang="scss" scoped>
.user-set {
  .item {
    padding: 30rpx;
  }

  .btn-border {
    border-bottom: 2rpx solid #f8f8f8;
  }
}
</style>
